<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品详情</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; color: #fff; margin: 0; padding: 0; }
      .detail-card {
        background: linear-gradient(120deg, #1F1F1F 60%, #2A2A2A 100%);
        border-radius: 22px;
        box-shadow: 0 6px 32px #000A, 0 1.5px 0 #232323 inset;
        margin: 2.5rem auto 0 auto;
        padding: 2.2rem 1.5rem 1.5rem 1.5rem;
        border: 1.5px solid #232323;
        max-width: 420px;
        position: relative;
        overflow: hidden;
      }
      .detail-img {
        width: 120px;
        height: 120px;
        border-radius: 18px;
        object-fit: cover;
        background: #232323;
        border: 2.5px solid #00f2ea;
        box-shadow: 0 2px 12px #00f2ea33;
        display: block;
        margin: 0 auto 1.2rem auto;
      }
      .detail-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #00f2ea;
        text-align: center;
        margin-bottom: 0.5rem;
        letter-spacing: 1px;
      }
      .detail-remark {
        color: #b3e0f7;
        font-size: 1.05rem;
        text-align: center;
        margin-bottom: 1.2rem;
      }
      .detail-section {
        margin-bottom: 1.1rem;
      }
      .detail-label {
        color: #fe2c55;
        font-weight: bold;
        margin-bottom: 0.3rem;
        display: block;
        font-size: 1.08rem;
      }
      .detail-content {
        color: #f5f6fa;
        font-size: 1.02rem;
        line-height: 1.7;
        background: #181a20;
        border-radius: 10px;
        padding: 0.7rem 1rem;
        margin-bottom: 0.2rem;
        word-break: break-all;
      }
      .back-btn {
        display: block;
        margin: 2rem auto 0 auto;
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        font-weight: bold;
        padding: 0.5rem 2.2rem;
        border-radius: 1.2rem;
        font-size: 1.1rem;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 8px #fe2c5533;
        transition: background 0.18s;
      }
      .back-btn:hover {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
      }
    </style>
  </head>
  <body>
    <div class="detail-card">
      <img id="detail-img" class="detail-img" src="" alt="菜品图片" />
      <div id="detail-title" class="detail-title">菜品名称</div>
      <div id="detail-remark" class="detail-remark"></div>
      <div class="detail-section">
        <span class="detail-label"><i class="fa fa-leaf mr-1"></i>原材料</span>
        <div id="detail-material" class="detail-content"></div>
      </div>
      <div class="detail-section">
        <span class="detail-label"><i class="fa fa-list-ol mr-1"></i>做法</span>
        <div id="detail-method" class="detail-content"></div>
      </div>
      <button class="back-btn" onclick="goBack()">
        <i class="fa fa-arrow-left mr-2"></i>返回
      </button>
    </div>
    <script>
      // 假设通过localStorage.detailData传递详情数据
      const detail = JSON.parse(localStorage.getItem('detailData') || '{}');
      if (detail && detail.name) {
        document.getElementById('detail-title').textContent = detail.name;
        document.getElementById('detail-img').src = detail.img || '';
        document.getElementById('detail-img').alt = detail.name;
        document.getElementById('detail-remark').textContent = detail.remark || '';
        document.getElementById('detail-material').textContent = detail.material || '';
        document.getElementById('detail-method').textContent = detail.method || '';
      }
      function goBack() {
        window.history.back();
      }
    </script>
  </body>
</html>
